<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" href="/css/workflow/work/m/style.css">

    <style>
        .main2{background: #efefef;margin-top: 0px;}
        .file {
            position: relative;
            display: inline-block; 
            background: #007df8;
            border: 1px solid #007df8;
            border-radius: 2px;
            padding: 0px 6px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .uploadbox p{margin-bottom: 5px;color: #095de0;}
    </style>
</head>
<body>
<div class="head_top">
    <span  class="head_toptitle" style="color: #007cfd;font-style: italic;font-size: 15px;font-weight: 900;"><fmt:message code="workflow.th.liushui" />：<span id="flowRunId"></span></span>
    <ul>
        <li><span class="head_toptitle weight" id="flowName"><fmt:message code="workflow.th.processname" />：</span></li>
        <li><span class="head_toptitle weight" ><fmt:message code="workflow.th.ProcessInitiator" />：</span><span id="flowBeginUser" class="head_toptitle" style="font-weight: 600;    margin-left: 2px;"></span></li>
        <li><span class="head_toptitle weight" ><fmt:message code="workflow.th.ProcessInitiation" />：</span><span id="flowBeginTime" class="head_toptitle" style="font-weight: 600;    margin-left: 2px;"></span></li>
    </ul>
</div>
<div id="basic_infor">
    <div class="basic_infor_title">
        <img src="/img/workflow/m/gapp_icon_no.png" alt="" class="icon">
        <div class="basic_infor"><fmt:message code="url.th.EssentialInformation" /></div>
        <div class="basic_infor_title_link">
            <a href="#"></a>
        </div>
    </div>
    <div class="table">
        <table  id="content">

        </table>

        <%--<table id="dtail1">--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>请假编号<span style="color:red;">&nbsp;*</span></div></td>--%>
        <%--<td class="td2">--%>

        <%--<input type="hidden" class="form-control" value="QJ2017041100409" name="COL101214452209721353575363">--%>
        <%--<input readonly="" class="gapp_input gapp_form" node-type="UNSUBMIT" data-key="1" data-field-type="36" data-must="1" data-is-write="1" id="COL101214452209721353575363" name="COL101214452209721353575363" placeholder="" value="QJ2017041100409" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>申请人</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input type="hidden" class="form-control" value="101000003" name="COL101214452211949986096497">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" node-type="UNSUBMIT" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452211949986096497" id="COL101214452211949986096497" placeholder="" value="刘建彩" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>申请部门</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452212458356051529" id="COL101214452212458356051529" placeholder="" value="390" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>登记时间</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input type="hidden" class="form-control" value="2017-04-11 15:22:50" name="COL101214452213496277203741">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" node-type="UNSUBMIT" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452213496277203741" id="COL101214452213496277203741" placeholder="" value="2017-04-11 15:22:50" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>请假类型</div></td>--%>
        <%--<td class="td2">--%>
        <%--<select class="gapp_form gapp_select" name="COL101214452216310134540103" data-must="0">--%>
        <%--<option value=""></option>--%>

        <%--<option value="年假">年假</option>--%>

        <%--<option value="病假">病假</option>--%>

        <%--<option value="事假">事假</option>--%>

        <%--<option value="婚假" selected="">婚假</option>--%>

        <%--<option value="产假">产假</option>--%>

        <%--<option value="丧假">丧假</option>--%>

        <%--<option value="其他假期">其他假期</option>--%>

        <%--</select>--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>开始时间</div></td>--%>
        <%--<td class="td2">--%>
        <%--<!-- <input type="hidden" class="form-control" value="2017-04-12 00:00:00" name="COL101214452216811320625239"> -->--%>
        <%--<input style="width:88%" readonly="" id="COL101214452216811320625239" name="COL101214452216811320625239" type="text" value="2017-04-12 00:00:00" class="gapp_input gapp_date" onclick="laydate({format: 'YYYY-MM-DD hh:mm:ss'})" data-field-type="030301" data-must="0" data-is-write="1">--%>
        <%--<span style="width:30px;position:absolute;right:7px"><img style="width: 24px;" onclick="dateclick(this)" target="COL101214452216811320625239" src="../../img/workflow/m/gapp_calendar.png"></span>--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>结束时间</div></td>--%>
        <%--<td class="td2">--%>

        <%--<!-- <input type="hidden" class="form-control" value="2017-04-19 00:00:00" name="COL101214452216974250716463"> -->--%>
        <%--<input style="width:88%" readonly="" id="COL101214452216974250716463" name="COL101214452216974250716463" type="text" value="2017-04-19 00:00:00" class="gapp_input gapp_date" onclick="laydate({format: 'YYYY-MM-DD hh:mm:ss'})" data-field-type="030301" data-must="0" data-is-write="1">--%>
        <%--<span style="width:30px;position:absolute;right:7px"><img style="width: 24px;" onclick="dateclick(this)" target="COL101214452216974250716463" src="../../img/workflow/m/gapp_calendar.png"></span>--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>请假天数</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input class="gapp_input gapp_form" data-key="0" data-field-type="020102" data-must="0" data-is-write="1" name="COL101214452217466181057391" id="COL101214452217466181057391" placeholder="" value="" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>请假原因</div></td>--%>
        <%--<td class="td2">--%>
        <%--<textarea rows="4" class="gapp_textarea" data-key="0" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452217682884218739" placeholder=""></textarea>--%>
        <%--</td>--%>
        <%--</tr>--%>

        <%--<tr>--%>
        <%--<td class="td1"><div>地址定位</div></td>--%>
        <%--<td class="td2">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>图片</div></td>--%>
        <%--<td class="td2">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>审批人</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" data-field-type="020000" data-must="0" data-is-write="0" name="COL101214452218198873264605" id="COL101214452218198873264605" placeholder="" value="" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>审批时间</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" data-field-type="020000" data-must="0" data-is-write="0" name="COL101214452218645908128952" id="COL101214452218645908128952" placeholder="" value="" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>审批意见</div></td>--%>
        <%--<td class="td2">--%>

        <%--<select class="gapp_form gapp_select" name="COL101214452218422299403779" readonly="" data-must="0">--%>
        <%--<option value=""></option>--%>
        <%--</select>--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>详细情况</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input readonly="" class="gapp_input gapp_form" data-key="0" data-field-type="020000" data-must="0" data-is-write="0" name="COL101214592177763965375234" id="COL101214592177763965375234" placeholder="" value="" type="text">--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>选择</div></td>--%>
        <%--<td class="td2">--%>
        <%--<input style="width:88%" id="COL101214799658967665901999" type="text" value="" class="gapp_input form-control" data-field-type="020000" data-ktype="07" data-source="" name="COL101214799658967665901999" data-html-type="input::source" data-name-desc="选择" data-source-from="101014435185193603017236" data-source-col="101214435178860515999050" data-must="0" data-is-write="1">--%>
        <%--<span class="gapp_span_source"><img style="width: 24px;" src="../../img/workflow/m/gapp_addperson.png"></span>--%>
        <%--</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>公共附件</div></td>--%>
        <%--<td class="td2"><button class="type_message">上传图片</button></td>--%>
        <%--</tr>--%>
        <%--<tr style="height: 100px;display: none;">--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"><div>会签意见</div></td>--%>
        <%--<td class="td2">--%>
        <%--<textarea rows="4" class="gapp_textarea" data-key="0" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452217682884218739" placeholder=""></textarea>--%>

        <%--</td>--%>
        <%--</tr>--%>

        <%--</table>--%>
    </div>
    <div class="done">
        <button class="type_done" id="turnBtn" style="  margin-left: 27px;"><fmt:message code="workflow.th.Transfer" /></button>
        <button class="type_done" id="backBtn" style="  display: none;  margin-left: 10px;"><fmt:message code="workflow.th.backbtn" /></button>
        <button class="type_done" id="saveBtn"><fmt:message code="global.lang.save" /></button>
        <button class="type_done"><fmt:message code="workflow.th.Entrust" /></button>
        <button class="type_done" id="deleteBtn" tid=""><fmt:message code="menuSSetting.th.deleteMenu" /></button>
    </div>
    <div class="basic_infor_title">
        <img src="/img/workflow/m/gapp_icon_no.png" alt="" class="icon">
        <div class="basic_infor"><fmt:message code="work.th.CountersignedArea" /></div>
        <div class="basic_infor_title_link">
            <a href="#"></a>
        </div>
    </div>
    <div class="signBox">
        <textarea rows="4" class="gapp_textarea" data-key="0" data-field-type="020000" data-must="0" data-is-write="1" name="COL101214452217682884218739" placeholder=""></textarea>
        <div class="hqbox"></div>
    </div>
    <div class="basic_infor_title">
        <img src="/img/workflow/m/gapp_icon_no.png" alt="" class="icon">
        <div class="basic_infor"><fmt:message code="email.th.file" /></div>
        <div class="basic_infor_title_link">
            <a href="#"></a>
        </div>
    </div>
    <div >
        <ul class="uploadbox" style="min-height: 50px;">

        </ul>
    </div>
    <div style="width: 100%;height: 24px;" class="choose_box">

    </div>
    <div class="photo_box" style="padding: 5px;">

    </div>

</div>
<div class="lct" style="display: none">
    <div class="lct_title">
        <fmt:message code="workflow.th.chart" />
    </div>
    <div class="lct_body">
        <ul class="lct_info">
            <li><span class="head_toptitle weight" style="color:#0074ec;"><fmt:message code="workflow.th.SerialRegistration" /></span></li>
            <li><span class="head_toptitle weight" ><fmt:message code="workflow.th.HostedAdministrator" /></span><span class="head_toptitle" style="color: #73a282;margin-left: 2px;"><fmt:message code="workflow.th.second" /></span></li>
            <li><span class="head_toptitle weight" ><fmt:message code="workflow.th.StartedOn" />：</span><span class="head_toptitle" style="font-weight: 600;    margin-left: 2px;">2017-07-26 19:24</span></li>
        </ul>
    </div>
</div>
<script src="/js/jquery/jquery-1.9.1.js"></script>
<script src="/js/template.js"></script>
<script src="/lib/laydate/laydate.js"></script>
<script src="/js/mustache.min.js"></script>
<script src="/js/base/base.js"></script>
<script src="/js/workflow/work/workform.js"></script>
<script src="/js/street/workflow/work/m/workformh5.js"></script>
<script src="/lib/jquery.form.min.js" ></script>
<script src="/js/jquery/jquery.cookie.js"></script>
<script>
    function ready(){
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            try{
                window.webkit.messageHandlers.rightTitle.postMessage({'title':'<fmt:message code="workflow.th.Transfer" />','name':'xxxxx','function':'turn'});
            }catch(err){
                rightTitle('<fmt:message code="workflow.th.Transfer" />','xxxxx','turn');
            }
            var ss = ' <button class="file" onclick="btn1()" style="margin-left: 12px;">选择文件</button>';
            $('.choose_box').html(ss);
        } else if (/(Android)/i.test(navigator.userAgent)) {
            //alert(navigator.userAgent);
            Android.rightTitle('<fmt:message code="workflow.th.Transfer" />','xxxxx','turn');
            var ss = ' <button class="file" onclick="btn1()" style="margin-left: 12px;">选择文件</button>';
            $('.choose_box').html(ss);
        }
    }
    function btn1(){
        btn('imgadd1')
    }
    function btn(cb){
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            try{
                window.webkit.messageHandlers.addImage.postMessage({'function':cb,'num':'0'});
            }catch(err){
                addImage(cb,'0');
            }
        } else if (/(Android)/i.test(navigator.userAgent)) {
            //alert(navigator.userAgent);
            Android.addImage(cb,'0');
        }
    }
    imptarget = ''
    function phoneimgupload(e) {
          imptarget = $(e);
           btn("imgupload3")
    }
    function imgupload3(img,name,type){
        var url = img.substr(img.indexOf('?')+1).split(',')[0];
        var listStr = '<img  name="'+imptarget.attr('name')+'" onclick="preview(this.src)" src="'+'/xs?'+url+'" style="cursor: pointer;'+imptarget.attr('style')+'"  id="'+imptarget.attr('name')+'" title="'+imptarget.attr('title')+'" align="absmiddle" style=""  class="imgupload_data"    width="'+imptarget.attr('width')+'" height="'+imptarget.attr('height')+'"/>';
        imptarget.before(listStr);
        imptarget = '';
    }
    function preview(url){

        Android.overLookFile(url, '')
    }
    function imgadd1(img,name,type){
        var arr = img.split(',');
        var name_arr = name.split(',');
        var http = 'http://'+ window.location.host;
        if(type == 1){
            var img = '';
            for(var i=0;i<arr.length -1;i++){
                var url =  arr[i];

                img += '<img id="blah"  src="'+ arr[i] +'" onclick="anios($(this))" style="width:50px;height:50px;margin-right: 10px;margin-bottom: 10px;" url="'+url +'" name="'+ name_arr[i] +'">';
            }
            $('.photo_box').append(img);
        }else{
            var name_str = '';
            for(var i=0;i<name_arr.length -1;i++){
                var url = http + arr[i];
                name_str += '<p  onclick="anios($(this))" url="'+url+'"  name="'+ name_arr[i] +'">'+ name_arr[i] +'</p>'
            }
            $('.uploadbox').append(name_str);
        }

    }

    function anios(e){
        var url = e.attr('url');

        var name = e.attr('name');

        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            try{
                window.webkit.messageHandlers.overLookFile.postMessage({'url':url,'name':name});
            }catch(error){
                overLookFile(url,name);
            }
        } else if (/(Android)/i.test(navigator.userAgent)) {

            Android.overLookFile(url,name);
        }

    }

    $(function () {
        //imgadd('/xs?AID=5124&MODULE=workflow&COMPANY=xoa1001&YM=1708&ATTACHMENT_ID=407195972&ATTACHMENT_NAME=1503645688962.jpg,/xs?AID=5124&MODULE=workflow&COMPANY=xoa1001&YM=1708&ATTACHMENT_ID=407195972&ATTACHMENT_NAME=1503645688962.jpg,','1503645688962.jpg,1503645688962.jpg','1');
        function auto() {
            var width = $('#word').width() / 2;
            $('#word .table td').css('width', '' + width + '');
            var width1 = width - 62;
            $('#word .action').css('width', '' + width1 + '');
        }

        function dateclick(e) {
            laydate({
                elem: '#' + $(e).attr('target'),
                format: 'YYYY-MM-DD hh:mm:ss'
            });
        }

        function uploadimg(data) {
            $('#picture').val(data);
            $('#picture').attr('value', data);
        }

        $('#fileUpload').change(function () {
            var e = this;
            $('#uploadForm').ajaxSubmit({
                dataType:'json',
                success:function (res) {
                    if(res.msg == 'OK'){
                        if( res.obj[0].isImage ==0){
                            readURL(e);
                        }else{
                            url = res.obj[0].attUrl;
                            console.log(url);
                            var str = '<li><a href="#"><span>'+ res.obj[0].attachName+'</span></a></li>';
                            $('.uploadbox').append(str);
                        }
                    }

                }
            })
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {

                        var img = '<img id="blah" src="'+e.target.result+'" alt="<fmt:message code="workflow.th.DisplayUploaded" />" style="width:50px;height:50px;">';
                        $('.photo_box').append(img);
                    }

                    reader.readAsDataURL(input.files[0]);

                }
            }
        });



    });
</script>
</body>
</html>